<template>
  <div class="big_6">
    <div>
      <div class="top_22">
        <p><span>提现</span></p>
      </div>
      <div class="max_money" v-if="maxCoin">
        <p><span>最高可提现金额：100,000.00元</span></p>
      </div>
      <div class="cnet" v-if="hides">
        <div class="component-wrap">
          <el-form ref="form" :model="user" :rules="rules">
            <section
              style="
                display: flex;
                align-items: center;
                margin-bottom: 35px;
                margin-top: 16px;
              "
            >
              <el-dropdown trigger="click" placement="bottom-start">
                <el-input
                  placeholder="请选择充值银行卡"
                  v-model="bank"
                  style="width: 260px"
                >
                  <i slot="suffix" class="el-icon-arrow-down"></i>
                </el-input>
                <el-dropdown-menu slot="dropdown" class="dropdown-container">
                  <el-radio-group
                    v-model="radio"
                    class="radio-container"
                    @change="setBank"
                  >
                    <el-dropdown-item
                      v-for="(item, index) in form"
                      :key="index"
                    >
                      <el-radio :label="index" class="el_radio">
                        <span>{{ item.bank_card_code }}</span
                        >&nbsp;&nbsp;&nbsp;
                        <span>{{ item.bank_card_name }}</span>
                      </el-radio>
                    </el-dropdown-item>
                  </el-radio-group>
                </el-dropdown-menu>
              </el-dropdown>
            </section>

            <div class="content_center_22">
              <el-input
                v-model="t_money"
                class="el_input_1"
                placeholder="提现金额                                        元"
              ></el-input>
            </div>

            <div class="content_center_223">
              <el-form-item prop="password">
                <el-input
                  prop="password"
                  v-model="t_pwd"
                  class="el_input_12"
                  placeholder="交易密码"
                  prefix-icon="el-icon-lock"
                  show-password
                ></el-input>
              </el-form-item>
            </div>

            <div class="content_center_223">
              <el-input
                v-model="t_code"
                class="el_input_120"
                placeholder="短信验证码"
                prefix-icon="el-icon-user"
              ></el-input>
             <button
                @click.prevent="getShortMessageCode()"
                :class="{code_btn:ppt,code_btn1:!ppt}"
                :disabled="!show"
              >
                <span v-show="show">获取验证码</span>
                <span v-show="!show">{{ count }} 秒后可重发</span>
              </button>
            </div>
          </el-form>
        </div>

        <div class="component-wrap_24">
          <p><span>手续费0元</span></p>
        </div>
        <div>
          <el-button class="btn_10" type="success" plain @click="next()"
            >下一步</el-button
          >
        </div>
      </div>

      <div class="success_1" v-if="hidesFalse">
        <div class="success_2_cneter">
          <p>
            <span class="chongzhi_2">您已申请充值成功</span>
          </p>
          <p class="chongzhi_p_2">
            <span
              >资金会在1-3个工作日内（节假日顺延）到账，感谢您对**网贷金融平台的支持若有问题请咨询客服：400-888-1888</span
            >
          </p>

          <el-button
            class="success_btn_10"
            type="danger"
            plain
            @click="nextRecharge()"
            >前往投资</el-button
          >

          <p><span></span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "AccountBank",
  props: {},
  data() {
    return {
      bank: "",
      t_code: "",
      hidesFalse: false,
      hides: true,
      checked: false,
      maxCoin: true,
      user_phone: "",
      timer: 0,
      count: 0,
      ppt: true, //点击时改变样式
      show: true,
      radio: "",
      form: {
        bank_card_name: "",
        bank_card_img: "",
        bank_card_code: "",
        bank_card_transaction_pwd: "",
        bank_card_id: "",
      },

      withdrawMoney: "",
      t_pwd: "",
      verificationCode: "",
      t_money: "",
     
    };
  },
  created() {
    this.initialize();
  },
  mounted() {},
  methods: {
    look2(val) {
      this.hides = false;
    },

    //下一步
    next() {
      if (this.bank != null && this.bank != "") {
        if (this.t_money != null && this.t_money != "" && this.t_money.length<5) {
          if (
            this.t_pwd != null &&
            this.t_pwd != "" &&
            this.t_pwd.length == 6
          ) {
            if (this.t_code != null && this.t_code != "") {
              axios({
                url: "/api/withdraw/BankCardWithdraw",
                params: {
                  t_code: this.t_code, //验证码
                  t_pwd: this.t_pwd, //密码
                  t_money: this.t_money, //支付金额
                  t_bank_code: this.bank, //银行卡号
                },
              }).then((res) => {
                if (res.data == "提现成功") {
                  this.hides = false;
                  this.hidesFalse = true;
                  this.maxCoin = false;
                } else {
                  this.$message({
                    message: res.data,
                    type: "warning",
                  });
                  return;
                }
              });
            } else {
              this.$message({
                message: "请输入验证码",
                type: "warning",
              });
              return;
            }
          } else {
            this.$message({
              message: "请输入正确的支付密码",
              type: "warning",
            });
            return;
          }
        } else {
          this.$message({
            message: "请输入要提现  的金额并且不能超过一万元",
            type: "warning",
          });
          return;
        }
      } else {
        this.$message({
          message: "请选择银行卡",
          type: "warning",
        });
        return;
      }
    },
    //继续充值
    nextRecharge() {
      this.hides = true;
      this.hidesFalse = false;
      this.$router.push({ path: "Investment" });
    },

    // 获取短信验证码
    getShortMessageCode() {
      this.ppt = !this.ppt;
      axios({
        url: "/api/user/smsverification",
      }).then((res) => {
        console.log(res);
        // this.form=res.data.data;
      });
      // 验证码倒计时
      if (!this.timer) {
        console.log(this.timer);
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.ppt = !this.ppt;
          }
        }, 1000);
      }
    },

    handleItem() {
      //   console.log(111);
    },
    setBank(e) {
      console.log(e);
      this.bank = this.form[Number(e)].bank_card_code;
    },

    //页面加载获取对应手机号关联银行卡
    initialize() {
      axios({
        url: "/api/user/findBankCardByPhone",
        // params: { ...this.form },
      }).then((res) => {
        this.form = res.data.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-message {
  height: 50px !important;
  top: 65% !important;
  margin-top: -500px !important;
  z-index: 100000002 !important;
}
.max_money {
  margin-bottom: -5px;
  margin-top: 60px;
  margin-left: 265px;
}
.chongzhi_p_2 {
  margin-top: 20px;
  font-size: 14px;
}

.success_btn_10 {
  width: 55%;
  height: 45px;
  margin: 0 auto;
  margin-top: 20px;
}

.chongzhi_2 {
  font-size: 20px;
}

.success_2_cneter {
  width: 50%;
  height: 200px;
  // background-color: aqua;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
}
.success_1 {
  width: 100%;
  height: 300px;
  // background-color: aqua;
  // margin: 0 auto;
  align-content: center;
}
.big_6 {
  height: 750px;
}
.code_btn {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid red;
  background-color: red;
  -webkit-border-radius: 5px;
}
.code_btn1 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid #cccccc;
  background-color: #cccccc;
  -webkit-border-radius: 5px;
}
.el_input_120 {
  width: 50%;
}
.el_input_12 {
  width: 94%;
}
.el_input_1 {
  width: 94%;
}
.content_center_2233 {
  width: 100%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 10px;
}
.top_22 {
  margin-left: 30px;
  width: 93%;
  border-radius: 7px;
  height: auto;
  /* background-color: antiquewhite; */
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 18px;
}
.content_center_223 {
  width: 100%;
  height: 100%;
  // margin-top: -10px;
  margin-bottom: 10px;
}
.content_center_2211 {
  float: left;
  width: 50%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 10px;
}
.content_center_22 {
  width: 100%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 28px;
}
.btn_10 {
  width: 40%;
  margin: 0 auto;
  float: left;
  margin-top: -20px;
  margin-left: 90px;
  margin-bottom: 20px;
}

.cnet {
  width: 70%;
  height: 295px;
  // background-color: red;
  margin: 0 auto;
  float: left;
  margin-left: 174px;
}
.label_font {
  width: 120px;
  margin-left: 50px;
}
.el_radio {
  width: 100%;
}
.component-wrap {
  width: 42%;
  height: 300px;
  float: left;
  margin-top: 20px;
  margin-left: 90px;
  /deep/.el-dropdown {
    width: calc(100% - 170px);
  }
}
.span_code {
  //   margin-left: -40px;
  //   margin-top: 166px;
  float: left;
  font-size: 14px;
  color: #ccbebe;
}
.component-wrap_24 {
  margin-left: -0px;
  margin-top: 176px;
  float: left;
  font-size: 14px;
  color: #ccbebe;
}
.component-wrap_2 {
  margin-left: 10px;
  margin-top: 37px;
  float: left;
  font-size: 14px;
  color: black;
}
.dropdown-container {
  display: flex;
  flex-wrap: wrap;
  width: 254px;

  /deep/.el-radio {
    display: flex;
    align-items: center;
    .el-radio__label {
      display: flex;
      align-items: center;
      font-size: 14px;
      padding-left: 5px;
      img {
        width: 80px;
        height: 60px;
      }
    }
  }
}
.radio-container {
  display: flex;
  flex-wrap: wrap;
  /deep/.el-dropdown-menu__item {
    margin: 10px;
    padding: 0;
  }
}

/deep/.el-input__suffix-inner {
  line-height: 40px;
}
</style>

